<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.w3.org/1999/xhtml"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      layout:decorator="inc/layout"
>
<head>
    <meta charset="UTF-8"/>
    <title>全部课程</title>


    <script>
        function editCourseText(id, name) {
            layer.open({
                type: 2,
                title: name,
                shade: 0.8,
                maxmin: true,
                area: ['880px', '620px'],
                content: ctxPath + 'course/editText?id=' + id, //iframe的url
            })
        }

        function editCourse(id) {
            layer.open({
                type: 2,
                title: '修改',
                shadeClose: true,
                shade: 0.8,
                area: ['380px', '480px'],
                content: ctxPath + 'course/edit?id=' + id, //iframe的url
                end: function () {
                    location.reload();
                }
            })
        }

        function editCourseImg(id) {
            layer.open({
                type: 2,
                title: '请上传240X135的图片',
                shadeClose: true,
                shade: 0.8,
                area: ['380px', '580px'],
                content: ctxPath + 'course/editImg?id=' + id, //iframe的url
                end: function () {
                    location.reload();
                }
            })
        }


        function removeCourse(id) {
            layer.confirm('确定要删除该课程吗？', {
                btn: ['确定', '取消']
            }, function () {
                $.post(ctxPath + "course/delete", {id: id}, function (data) {
                    layer.alert(data, function () {
                        location.reload();
                    });
                })
            });
        }

        function changeCourse(id) {
            layer.confirm('确定要转换为笔记吗？', {
                btn: ['确定', '取消']
            }, function () {
                $.post(ctxPath + "course/change", {id: id}, function (data) {
                    layer.alert(data, function () {
                        location.reload();
                    });
                })
            });
        }

        function addCourse(id) {
            layer.prompt({
                title: '请输入新课程名称', formType: 0, shadeClose: true, end: function () {
                    location.reload();
                }
            }, function (name, index) {
                $.post(ctxPath + "course/add", {
                    pId: id,
                    name: name,
                    text: "<p>未添加</p>"
                }, function (data) {
                    layer.msg(data, {
                        time: 2000,//20s后自动关闭
                    });
                    layer.close(index);
                });
            });
        }

        function addNewCourse() {
            layer.prompt({
                title: '请输入新课程名称', formType: 0, shadeClose: true, end: function () {
                    location.reload();
                }
            }, function (name, index) {
                $.post(ctxPath + "course/add", {
                    name: name,
                    text: "<p>未添加</p>"
                }, function (data) {
                    layer.msg(data, {
                        time: 2000,//20s后自动关闭
                    });
                    layer.close(index);
                });
            });
        }

        function editCourseNotStatus(id, status) {
            layer.confirm('确定要不发表该课程吗？', {
                btn: ['确定', '取消']
            }, function () {
                $.post(ctxPath + "course/status", {
                    id: id,
                    status: 0,
                }, function (data) {
                    layer.alert(data, function () {
                        location.reload();
                    });
                })
            });
        }

        function editCourseStatus(id, status) {
            layer.confirm('确定要发布该课程吗？', {
                btn: ['确定', '取消']
            }, function () {
                $.post(ctxPath + "course/status", {
                    id: id,
                    status: 1,
                }, function (data) {
                    layer.alert(data, function () {
                        location.reload();
                    });
                })
            });
        }
    </script>
    <script th:src="@{/static/util/js/wangEditor.js}"></script>
</head>

<body>

<div class="container" layout:fragment="content">
    <div class="row">
        <div class="col-sm-2">
            <button class="btn btn-primary" onclick="addNewCourse()">添加</button>
        </div>
        <div class="col-sm-10" style="height: 80px">
            <form class="form-inline text-right" action="" method="g">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">课程名</div>
                        <input type="text" class="form-control" name="name" th:value="${name}" placeholder="hibernate"/>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">搜索</button>
            </form>
        </div>
    </div>
    <div class="row">

        <div class="col-sm-12">

            <div class="col-sm-6" th:each="o:${pageModel.content}">
                <div class="thumbnail" style="height: 260px">
                    <div class="row" style="margin: 10px">
                        <div class="col-sm-4">

                            <img th:src="${o[0].img}" th:onclick="'editCourseImg(\''+${o[0].id}+'\')'"
                                 data-toggle="tooltip"
                                 title="课程换图" width="100%"/>

                            <div class="h3 text-center" th:text="${o[0].name}"
                                 th:onclick="'editCourseText(\''+${o[0].id}+'\',\''+${o[0].name}+'\')'"></div>

                            <div>课程分类：<span th:each="t:${o[0].courseTypes}" th:text="${t.name}"></span></div>
                            <div>
                                <shiro:hasPermission name="课程上下架">
                                    <span th:if="${o[0].status==1}"
                                          th:onclick="'editCourseNotStatus(\''+${o[0].id}+'\',\''+${o[0].status}+'\')'">
                                        <i class="fa fa-toggle-on fa-2x" data-toggle="tooltip"
                                           title="课程下架"></i>
                                        </span>
                                    <span th:if="${o[0].status!=1}"
                                          th:onclick="'editCourseStatus(\''+${o[0].id}+'\',\''+${o[0].status}+'\')'">
                                        <i class="fa fa-toggle-off fa-2x" data-toggle="tooltip"
                                           title="课程上架"></i>
                                        </span>
                                </shiro:hasPermission>
                                <shiro:hasPermission name="课程新增">
                                    <i class="fa fa-plus fa-2x"
                                       th:onclick="'addCourse(\''+${o[0].id}+'\')'" data-toggle="tooltip"
                                       title="添加子课程"></i>
                                </shiro:hasPermission>
                            </div>


                        </div>

                        <div class="col-sm-8">
                            <div>
                                <span th:text="${o[0].name}" class="h3"
                                      th:onclick="'editCourseText(\''+${o[0].id}+'\',\''+${o[0].name}+'\')'"> </span>
                                <span class="pull-right">

                                    <shiro:hasPermission name="课程删除">
                                        <i class="fa fa-remove fa-lg" th:onclick="'removeCourse(\''+${o[0].id}+'\')'"
                                           data-toggle="tooltip"
                                           title="课程删除"></i>
                                    </shiro:hasPermission>
                                    <shiro:hasPermission name="课程转笔记">
                                        <i class="fa fa-exchange fa-lg" th:onclick="'changeCourse(\''+${o[0].id}+'\')'"
                                           data-toggle="tooltip"
                                           title="课程转笔记"></i>
                                    </shiro:hasPermission>
                                    <shiro:hasPermission name="课程修改">
                                        <i class="fa fa-pencil fa-lg" th:onclick="'editCourse(\''+${o[0].id}+'\')'"
                                           data-toggle="tooltip"
                                           title="课程修改"></i>
                                    </shiro:hasPermission>

                                    <shiro:hasPermission name="课程修改">
                                        <i class="fa fa-window-restore fa-lg"
                                           th:onclick="'editCourseText(\''+${o[0].id}+'\',\''+${o[0].name}+'\')'"
                                           data-toggle="tooltip"
                                           title="课程内容"></i>

                                    </shiro:hasPermission>

                                    <shiro:hasPermission name="课程导出">
                                        <a th:href="@{'/course/outText?id='+${o[0].id}}" class="fa fa-sign-out"
                                           data-toggle="tooltip"
                                           title="课程导出"></a>
                                    </shiro:hasPermission>
                                </span>

                                <ul class="list-unstyled" style="margin-left: 8px">
                                    <li th:each="c:${o[1]}" style="border-bottom: 1px dashed #888888">
                                        <span th:text="${c.name}"
                                              th:onclick="'editCourseText(\''+${c.id}+'\',\''+${c.name}+'\')'"></span>
                                        <span class="pull-right">
                                        <shiro:hasPermission name="课程删除">
                                            <i class="fa fa-remove fa-lg" style="margin-left: 20px"
                                               th:onclick="'removeCourse(\''+${c.id}+'\')'" data-toggle="tooltip"
                                               title="课程删除"></i>
                                        </shiro:hasPermission>
                                        <shiro:hasPermission name="课程转笔记">
                                            <i class="fa fa-exchange fa-lg" th:onclick="'changeCourse(\''+${c.id}+'\')'"
                                               data-toggle="tooltip"
                                               title="课程转笔记"></i>
                                        </shiro:hasPermission>
                                        <shiro:hasPermission name="课程修改">
                                            <i class="fa fa-pencil fa-lg" th:onclick="'editCourse(\''+${c.id}+'\')'"
                                               data-toggle="tooltip"
                                               title="课程修改"></i>
                                        </shiro:hasPermission>
                                        <shiro:hasPermission name="课程修改">
                                            <i class="fa fa-window-restore fa-lg"
                                               th:onclick="'editCourseText(\''+${c.id}+'\',\''+${c.name}+'\')'"
                                               data-toggle="tooltip"
                                               title="课程内容编辑"></i>
                                        </shiro:hasPermission>
                                        <shiro:hasPermission name="课程导出">
                                            <a th:href="@{'/course/outText?id='+${c.id}}" class="fa fa-sign-out"
                                               data-toggle="tooltip"
                                               title="课程导出"></a>
                                        </shiro:hasPermission>
                                            </span>
                                    </li>
                                </ul>

                            </div>

                        </div>
                    </div>


                </div>
            </div>
            <div class="row">
                <div class="col-sm-10">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li class="am-pagination-first ">
                                <a th:href="@{/course/list(page=1,name=${name})}" class="">第一页</a>
                            </li>
                            <li th:if="${pageModel.number > 0}" class="am-pagination-prev ">
                                <a th:href="@{/course/list(page=${pageModel.number},name=${name})}"
                                   class="">上一页</a>
                            </li>
                            <li th:each="i : ${#numbers.sequence(1, pageModel.totalPages)}"
                                th:classappend="${(pageModel.number + 1) eq i} ? 'active' : ''">
                                <a th:href="@{/course/list(page=${i},name=${name})}"
                                   th:text="${i}" class="">1</a>
                            </li>
                            <li th:unless="${pageModel.number + 1 == pageModel.totalPages}"
                                class="am-pagination-next ">
                                <a th:href="@{/course/list(page=${pageModel.number} + 2,name=${name})}"
                                   class="">下一页</a>
                            </li>
                            <li class="am-pagination-last" th:if="${pageModel.totalPages>5}">
                                <a th:href="@{/course/list(page=${pageModel.totalPages},name=${name})}"
                                   class="">最末页</a>
                            </li>
                            <li class="am-pagination-last ">
                                <a th:text="'共 '+${pageModel.totalElements}+' 条记录'"></a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>

        </div>
    </div>
</div>

</body>
</html>